<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css(1)/common.css" />
		<link rel="stylesheet" type="text/css" href="css/shopmain.css" />
		<link rel="stylesheet" type="text/css" href="css(1)/iconfont.css" />

		<!--<script src="js/lushuju.js" type="text/javascript"></script>-->
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<div class="main">
			<div class="Mer">
				<div class="header">
					<i class="icon Hui-iconfont">&#xe67d;</i>
				</div>
				<div class="Mermain">
					<div class="logo">
						<img src="../shouye/{{xinxi.attributes.shopimg}}" />
					</div>
					<div class="Merattr">
						<h2 class="mername" v-html="xinxi.attributes.shopname">餐厅名</h2>
						<i class="icon Hui-iconfont">&#xe6d7;</i>
						<div style="display: -webkit-box;">
							<span>公告:</span>
							<p v-html="xinxi.attributes.notice"> </p>
						</div>

						<p class="time">新用户首单免费</p>
					</div>
				</div>
			</div>
			<div class="shopTabContainer">
				<!--商品-->
				<div class="shop">
					<span @click="change(1)" :class="{active:classname}">
					商品
				</span>
				</div>
				<!--评价-->
				<div>
					<span @click="change(2)" :class="{active:!classname}">
					评价
				</span>
				</div>
			</div>
			<div class="shopmain">
				<div class="shoplist" id="div1" v-if="classname">
					<ul>
						<li @click="dianji(item,$index)" v-for="item in mylist" :class={shopactive:myindex==$index}>
							<span v-html="item"></span>
						</li>
						<!--<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>
						<li><span>
						热销
					</span></li>-->
					</ul>
					<div class="shoplist-container">
						<dl>
							<dt id="id1">热销榜</dt>
							<dd v-for="i in myitem">
								<span class="foodimg">
									<img :src="i.attributes.productimg"/>
								</span>
								<div class="foodinfo">
									<header class="foodtitle">
										<span v-html="i.attributes.productname">
											金针肥牛
										</span>
									</header>
									<p class="fooddescription" v-html="i.attributes.remark">洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉，不吃洋葱的不要点</p>
									<p class="foodsales">
										<span>
											月售<span  v-html="i.attributes.salenum"></span>份
										</span>
										<span>
											好评率<span  v-html="i.attributes.grade"></span>%
										</span>
									</p>
									<strong class="footprice" v-html="i.attributes.price">14</strong>
									<div class="cartbutton">
										<span v-if="i.num>0" @click="removeshop(i)"><i class="icon Hui-iconfont">&#xe60b;</i></span>
										<span v-if="i.num!=0" v-html="i.num">0</span>
										<span @click="addshop(i)"><i class="icon Hui-iconfont">&#xe604;</i></span>
									</div>
								</div>
							</dd>

						</dl>
					</div>
				</div>
				<!--评价-->
				<div class="evaluate" id="div2" v-if="!classname">
					<div>

						<div class="overview-container">
							<div class="overview-col1">
								<strong>4.6</strong>
								<div>综合评价</div>
							</div>
							<div class="overview-col2">
								<div class="">
									综合评分:
								</div>
							</div>
						</div>
						<ul>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="foot_b">
			<div class="shoppingcart">
				<i class="icon Hui-iconfont">&#xe670;</i>
			</div>
			<div class="cartview">
				<p class="cartview-pri1" v-html="money">￥0</p>
				<p class="cartview-pri2">配送费￥<span v-html="xinxi.attributes.sendprice"></span></p>
			</div>
			<div class="account">
				去结算
			</div>
		</div>
		<!--<script src="js/shopmain.js"></script>-->
		<script src="js/av-min-2.1.2.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var APP_ID = 'c4w6bVvWfh8xxcmkBE1G0gIt-gzGzoHsz';
			var APP_KEY = 'JBikg4Ksk76zcTi5BKYWvTJF';
			AV.init({
				appId: APP_ID,
				appKey: APP_KEY
			});
			var myvue = new Vue({
				el: "body",
				data: {
					list: "",
					userid: "",
					mylist: "",
					xinxi: "",
					myitem: [],
					classname: true,
					myindex: 0,
					money: 0
				},
				methods: {
					dianji: function(e, $index) {
						this.myitem = [];
						this.myindex = $index;
						console.log(e.$index)
						for (var i = 0; i < this.list.length; i++) {
							if (this.list[i].attributes.classify.indexOf(e) >= 0) {
								this.myitem.push(this.list[i]);
							}
						}
						console.log(this.myitem);
					},
					change: function(e) {
						console.log(e)
						if (e == 1) {
							this.classname = true
						} else {
							this.classname = false
						}
					},
					addshop: function(e) {
							e.num++;
						this.money += e.attributes.price * 1
					},
					removeshop: function(e) {
						if (e.num != 0) {
							e.num--;
							this.money -= e.attributes.price * 1
						}
					}
				},
				created: function() {
					chaxun();
				}
			})

			function chaxun() {
				//截取url
				console.log("1111")
				var reg = new RegExp("(^|&)" + "id" + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					this.userid = unescape(r[2]);
				} else {
					console.log(null);
				};
				console.log(this.userid);
				var query = new AV.Query('ELM_product');
				query.contains('shopid', this.userid);
				query.find().then(function(e) {
					console.log("进入")
					for(var i =0;i<e.length;i++){
						e[i].num=0;
					}
					myvue.list = e;
					console.log(myvue.list);
					//去重
					var arr = [];
					for (var i = 0; i < e.length; i++) {
						var arrb = e[i].attributes.classify.split(",");
						for (var k = 0; k < arrb.length; k++) {
							arr.push(arrb[k]);
						}
					}
					var newarr = [];
					for (var i = 0; i < arr.length; i++) {
						if (newarr.indexOf(arr[i]) == -1) {
							newarr.push(arr[i]);
						}
					}
					myvue.mylist = newarr;
					//
					console.log(newarr);
					console.log(myvue.myitem);
					for (var i = 0; i < myvue.list.length; i++) {
						if (myvue.list[i].attributes.classify.indexOf(newarr[0]) >= 0) {
							myvue.myitem.push(myvue.list[i]);
						}
					}
					console.log(myvue.myitem)
						//				for(var i = 0; i < shangpintu.length; i++){
						//					console.log(e[i].attributes.shopimg);
						//					shangpintu[i].src= e[i].attributes.shopimg;
						//					console.log(shangpintu[i].src);
						//			    }
				})
				var queryb = new AV.Query('ELM_shop');
				//				queryb.contains('objectId', this.userid);
				queryb.get(this.userid).then(function(w) {
					myvue.xinxi = w
					console.log(w);
				})
			}
		</script>
	</body>

</html>